<!--{template common/header_simple_start}-->
<link href="static/css/common.css?{VERHASH}" rel="stylesheet" media="all">
<script type="text/javascript" src="static/js/jquery.leftDrager.js?{VERHASH}"></script>
<style>
	.form-horizontal-left .control-label{
		width:150px;
	}
	.form-horizontal-left .help-block{
		padding-left:150px;
	}
</style>
<!--{template common/header_simple_end}-->
<!--{template common/commer_header}-->
<div class="bs-container clearfix">
  <div class="bs-left-container  clearfix"> 
    <!--{template left}--> 
  </div>
  <div class="left-drager">
    <div class="left-drager-op">
      <div class="left-drager-sub"></div>
    </div>
  </div>
  <div class="bs-main-container  clearfix">
    <div class="main-header clearfix">
      <ul class="nav nav-pills nav-pills-bottomguide">
        <li> <a href="{BASESCRIPT}?mod=cloud&op=edit&bz=dzz"> {lang set}</a> </li>
        <li> <a href="{BASESCRIPT}?mod=cloud&op=space">{lang space_management}</a> </li>
        <li class="active"> <a href="{BASESCRIPT}?mod=cloud&op=oauth&bz=ALIOSS">{lang oauth_ALIOSS_add_ALY}</a> </li>
      </ul>
    </div>
    <div class="main-content clearfix" style="border-top:1px solid #FFF;padding:30px 0">
      <div style="">
        <!--<h4 style="margin-bottom:20px">{lang set}Accesscess Key ID & Access Key Secret</h4>-->
        <form name="aliform" class="form-horizontal form-horizontal-left" action="{BASESCRIPT}?mod=cloud&op=oauth" method="post" onsubmit="return validate(this)">
          <input type="hidden" name="alisubmit" value="true" />
          <input type="hidden" name="bz" value="ALIOSS" />
          <input type="hidden" name="formhash" value="{FORMHASH}" />
          <div class="form-group">
            <label class="control-label" for="access_id">Access Key ID</label>
           
              <input type="text" id="access_id" class="form-control" name="access_id" autocomplete="off" value="$ali[access_id]" onblur="if(this.value==''){jQuery(this).parent().parent().addClass('has-warning');}else{jQuery(this).parent().parent().removeClass('has-warning');getBucket();}">
            <span class="help-block">{lang oauth_ALIOSS_ALY_storage}Access Key ID</span> 
           
          </div>
          <div class="form-group">
            <label class="control-label" for="access_key">Access Key Secret</label>
            
              <input type="password" class="form-control" id="access_key" name="access_key" autocomplete="off" value="$ali[access_id]" onblur="if(this.value==''){jQuery(this).parent().parent().addClass('has-warning');}else{jQuery(this).parent().parent().removeClass('has-warning');getBucket();}">
           
             <span class="help-inline">{lang oauth_ALIOSS_ALY_storage}Access Key Secret</span> 
          </div>
          <div class="form-group">
            <label class="control-label"><a href="javascript:;" onclick="getBucket()">{lang oauth_ALIOSS_click_gain}</a></label>
           
              <select id="bucket" name="bucket" class="form-control" onchange="setBucketHost()">
              </select>
            <span class="help-inline">{lang oauth_ALIOSS_bucket}</span> 
          </div>
          <div class="form-group">
            <label class="control-label" for="hostname">
            <div class="dropdown" > <a id="hostname_dropmenu" role="button" data-toggle="dropdown" href="#">{lang select_node_address} <span class="caret"></span></a>
              <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6" style="max-height:300px;overflow-y:auto;">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-hangzhou.aliyuncs.com" onclick="selectHostName(this);return false;">{lang oauth_ALIOSS_node1}</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-hangzhou-internal.aliyuncs.com" onclick="document.getElementById('hostname').value=jQuery(this).attr('hostname');return false;">{lang oauth_ALIOSS_node2}</a></li>
                <li role="presentation" class="divider"></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-qingdao.aliyuncs.com" onclick="document.getElementById('hostname').value=jQuery(this).attr('hostname');return false;">{lang oauth_ALIOSS_node3}</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-qingdao-internal.aliyuncs.com" onclick="document.getElementById('hostname').value=jQuery(this).attr('hostname');return false;">{lang oauth_ALIOSS_node4}</a></li>
                <li role="presentation" class="divider"></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-beijing.aliyuncs.com" onclick="document.getElementById('hostname').value=jQuery(this).attr('hostname');return false;">{lang oauth_ALIOSS_node5}</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-beijing-internal.aliyuncs.com" onclick="document.getElementById('hostname').value=jQuery(this).attr('hostname');return false;">{lang oauth_ALIOSS_node6}</a></li>
                <li role="presentation" class="divider"></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-hongkong.aliyuncs.com" onclick="document.getElementById('hostname').value=jQuery(this).attr('hostname');return false;">{lang oauth_ALIOSS_node7}</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-hongkong-internal.aliyuncs.com" onclick="document.getElementById('hostname').value=jQuery(this).attr('hostname');return false;">{lang oauth_ALIOSS_node8}</a></li>
                <li role="presentation" class="divider"></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-shenzhen.aliyuncs.com" onclick="document.getElementById('hostname').value=jQuery(this).attr('hostname');return false;">{lang oauth_ALIOSS_node9}</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-shenzhen-internal.aliyuncs.com" onclick="document.getElementById('hostname').value=jQuery(this).attr('hostname');return false;">{lang oauth_ALIOSS_node10}</a></li>
                <li role="presentation" class="divider"></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-shanghai.aliyuncs.com" onclick="document.getElementById('hostname').value=jQuery(this).attr('hostname');return false;">{lang oauth_ALIOSS_node11}</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-shanghai-internal.aliyuncs.com" onclick="document.getElementById('hostname').value=jQuery(this).attr('hostname');return false;">{lang oauth_ALIOSS_node12}</a></li>
                <li role="presentation" class="divider"></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-us-west-1.aliyuncs.com" onclick="document.getElementById('hostname').value=jQuery(this).attr('hostname');return false;">{lang oauth_ALIOSS_node13}</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-us-west-1-internal.aliyuncs.com" onclick="document.getElementById('hostname').value=jQuery(this).attr('hostname');return false;">{lang oauth_ALIOSS_node14}</a></li>
                <li role="presentation" class="divider"></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-ap-southeast-1.aliyuncs.com" onclick="document.getElementById('hostname').value=jQuery(this).attr('hostname');return false;">{lang oauth_ALIOSS_node15}</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-ap-southeast-1-internal.aliyuncs.com" onclick="document.getElementById('hostname').value=jQuery(this).attr('hostname');return false;">{lang oauth_ALIOSS_node16}</a></li>
              </ul>
            </div>
            </label>
            
              <input type="text" class="form-control" id="hostname" name="hostname" autocomplete="off" value="$ali[hostname]" onblur="if(this.value==''){jQuery(this).parent().parent().addClass('has-warning');}else{jQuery(this).parent().parent().removeClass('has-warning');}">
             <span class="help-inline">{lang oauth_ALIOSS_node17}</span> 
          </div>
          <div class="form-group">
            <label class="control-label"></label>
              <input type="submit" class="btn btn-primary" value="{lang add}">
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
	jQuery('.left-drager').leftDrager_layout();

	function setBucketHost() {
		jQuery('#hostname').val('');
		jQuery("#bucket").parent().parent().removeClass('has-warning');
	}

	function selectHostName(obj) {
		jQuery('#hostname').val(jQuery(obj).attr('hostname'));
		jQuery("#hostname").parent().parent().removeClass('has-warning');
		jQuery('#hostname_dropmenu').html(jQuery(obj).html() + '<span class="caret"></span>');
	}

	function getBucket() {
		var id = jQuery("#access_id").val();
		var key = jQuery("#access_key").val();
		console.log('aaaaaaaaaaaa');
		if(id == '' || key == '') {
			return;
		}
		jQuery.getJSON('{BASESCRIPT}?mod=cloud&op=oauth&do=getBucket', { id: id, key: key }, function(json) {
		    console.log(json);
			if(json.length > 0) {
				var html = '';
				for(var i in json) {
					html += '<option value="' + json[i] + '" >' + json[i] + '</option>';
				}
				console.log(html);
				jQuery('#bucket').html(html);
			}
		});

	}

	function validate(form) {
		if(jQuery("#access_id").val() == '') {
			jQuery("#access_id").parent().parent().addClass('has-warning');
			return false;
		} else if(jQuery("#access_key").val() == '') {
			jQuery("#access_key").parent().parent().addClass('has-warning');
			return false;
		} else if(jQuery("#bucket").val() == '') {
			jQuery("#bucket").parent().parent().addClass('has-warning');
			return false;
		} else if(jQuery("#hostname").val() == '') {
			jQuery("#hostname").parent().parent().addClass('has-warning');
			return false;
		}
		return true;
	}
</script> 
<script src="static/bootstrap/js/bootstrap.min.js?{VERHASH}"></script>
<!--{template common/footer_simple}-->